<%-- 
    Document   : SearchPage
    Created on : Mar 15, 2013, 11:19:52 PM
    Author     : aasharm2
--%>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>

<%@ page language="java" %> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="styles/gold/browsetab.css" type="text/css" media="screen" />
<link rel="stylesheet" href="styles/gold/global.css" type="text/css" media="screen" />

<html:form action="TipAction">
    <br>
    <p style="text-align: center;font-weight: bold;font-size: 15px">Tip Calculator</p>
    <div id="vtab">
        <ul>
            <li class="Main">Main Page</li>
            <li class="TipTailoring">Tip Tailoring</li>
        </ul>
        <div>
            <h4>Main Page</h4>
            <table class="form" style="width: 500px">
                <tr>
                    <th>Number of Guests</th>
                    <td>&nbsp;<html:text size="4"  maxlength="3" property="numguest" onchange="calculate()"/></td>
                <tr>
                <tr>
                    <th>Quality of Service</th>                    
                    <td style="vertical-align: central">&nbsp;<div id="slider-serv-qual"></div>
                    </td>
                </tr>
                <tr>
                    <th>Bill Total</th>    
                    <td>$<html:text  size="10" property="billtotal" onchange="calculate()"/></td>
                </tr>
                <tr>
                    <th>Bill Deductions</th>    
                    <td>$<html:text  size="10" property="billdeductions" onchange="calculate()"/></td>
                </tr>
                <tr>
                    <th>Tax</th>    
                    <td>$<html:text  size="10"  property="tax" onchange="calculate()"/></td>
                </tr>    
                <tr>
                    <th>Tip Rate</th>
                    <td>&nbsp;<html:text  styleId="tiprateid" size="10" property="tiprate"/>%</td>
                </tr>
                <tr>
                    <th>Total Tip</th>
                    <td>$<html:text size="10" property="totaltip" /></td>
                </tr>
                <tr>
                    <th>Tip Per Person</th>
                    <td>&nbsp;<html:text  size="10" property="tipperperson"/></td>
                </tr>
                <tr >
                    <th>Total (Bill and Tip) </th>
                    <td>&nbsp;<html:text  size="10" property="total" /></td>
                </tr>
            </table>
            <p style="clear:both">&nbsp;</p>
            <p style="clear:both">&nbsp;</p>
            <h4>Tip Configuration</h4>

            <table class="form">
                <tr ><td colspan="2">The tip range is the percentage range for selecting tips. defaults values are provided  but you can adjust the range if you wish</td></tr>
                <tr>
                    <th>
                        Minimum Tip percentage
                    </th>
                    <td><html:text size="10" property="mintip" onchange="calculate()"/></td>
                </tr>
                <tr>
                    <th>
                        Maximum Tip percentage
                    </th>
                    <td><html:text  size="10" property="maxtip" onchange="calculate()"/></td>
                </tr>
                <tr>
                    <td colspan="2">The tip base is the items of the bill used to determine the Tip amount. The Tip base consists of: The Bill Total, The Tax, and Items deducted from the bill ( discounts , refunds... etc) </td>
                </tr>
                <tr><th>
                        Include Tax
                    </th><td>
                        <html:checkbox  styleId="checkboxtax" property="inculdetax" onchange="calculate()"/>
                    </td>
                </tr>
                <tr><th>
                        Include Deductions
                    </th><td>
                        <html:checkbox  styleId="checkboxded" property="inculdeded" onchange="calculate()"/>
                    </td>
                </tr>
            </table>
        </div>
        <div>
            <h4>Tip Tailoring</h4>
            <table class="form" id="tiptable" style="width: 500px">
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

</html:form>
<script type="text/javascript">
    $(function() {
        var $items = $('#vtab>ul>li');
        $items.click(function() {
            $items.removeClass('selected');
            $(this).addClass('selected'); 

            var index = $items.index($(this));
            $('#vtab>div').hide().eq(index).show();
        }).eq(0).click();
    });
</script>
<script type="text/javascript"> 
    window.onload = defaultFunc();
    function defaultFunc(){
        var form = document.forms[0];
        form.tiprate.disabled = true;
        form.totaltip.disabled = true;
        form.tipperperson.disabled = true;
        form.total.disabled = true;
        form.checkboxtax.checked = false;
        form.checkboxded.checked = true;
        form.tipperperson.value = 0.0;
        $( "#slider-serv-qual" ).slider({
            range: "min",
            value: 20,
            min: parseFloat(form.mintip.value),
            max: parseFloat(form.maxtip.value),
            slide: function( event, ui ) {
                $( "#tiprateid" ).val(ui.value );
            }
        });
        $( "#tiprateid" ).val($( "#slider-serv-qual" ).slider( "value" ) );
        var numOfGuests = parseInt(form.numguest.value,10);
        updateTipTailoring(numOfGuests);
    }
    function calculate(){
        var form = document.forms[0];
       
        doValidations();
        doCalcualtions(form,form.tiprate.value);
        var numOfGuests = parseInt(form.numguest.value,10);
        if(numOfGuests<100){
            updateTipTailoring(numOfGuests);
            $( "#slider-serv-qual" ).slider({
                range: "min",
                value: (parseFloat(form.mintip.value)+ parseFloat(form.maxtip.value))/2,
                min: parseFloat(form.mintip.value),
                max: parseFloat(form.maxtip.value),
                slide: function( event, ui ) {
                    $( "#tiprateid" ).val(ui.value );
                },
                step:.01,
                change:calcAgain
            });
            $( "#tiprateid" ).val($( "#slider-serv-qual" ).slider( "value" ) );
        }
    }
    
    function updateTipTailoring(numOfGuests){
        var form = document.forms[0];
        $("#tiptable").empty();
        for(i = 1;i<=numOfGuests;i++){
            
            var newRowDiv = $(document.createElement('tr'));
            newRowDiv.html('<tr><td>' +
                '<input type="text" name="guestbox' + i + 
                '" id="guestbox' + i + '" value="Guest' + i + '" /></td>&nbsp;&nbsp;&nbsp;<td><div id="slider-guest' + i +'"></div></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
                '<td><input style="margin-left:20px" type="text" size="10" id="guestboxval' + i + '"/></td></tr>');
            
            $('#tiptable').append(newRowDiv);
            $( "#slider-guest"+i ).slider({
                range: "min",
                value: form.tipperperson.value,
                min: 0,
                max: form.tipperperson.value*1.5,
                step:.01,
                slide: function( event, ui ) {
                    $( "#guestboxval" + i ).val(ui.value );
                },
                stop: calcTipTailor
            });
            $( "#guestboxval" + i ).val($( "#slider-guest"+i ).slider( "value" ));
            $( "#guestboxval" + i ).attr("disabled", "disabled"); 
                
        }
    }
    function calcTipTailor(event,ui){
        var form = document.forms[0];
        var noOfGuest = parseInt(form.numguest.value,10);
        var index =0;
        var totalSlider = 0;
        for(i = 1;i<=noOfGuest;i++){
            var eventid = event.target.id;
            if( eventid.substring(12, eventid.length)==i )
            {
                index=i;
                $( "#guestboxval" + index ).val($( "#slider-guest"+index ).slider("value"));
                break;
            }
        }
        for(i = 1;i<=noOfGuest;i++){
            totalSlider = parseFloat(totalSlider) + parseFloat($( "#guestboxval" + i ).val());
        } 
        form.totaltip.value = totalSlider.toFixed(2);
        
        var taxvalue = parseFloat(form.tax.value);
        var billDeductions = parseFloat(form.billdeductions.value);
        if(!form.checkboxtax.checked){
            taxvalue =  0;
        }
        if(!form.checkboxded.checked){
            billDeductions =  0;
        }
        
        var grandtotal = (parseFloat(form.billtotal.value) + parseFloat(form.tax.value) - parseFloat(form.billdeductions.value) + parseFloat(form.totaltip.value));
        form.total.value = grandtotal.toFixed(2);
        form.tiprate.value =   (((form.totaltip.value)  /(parseFloat(form.billtotal.value) + parseFloat(taxvalue) - parseFloat(billDeductions))) * 100).toFixed(2);
        $( "#tiprateid" ).change(function() {
            $( "#slider-serv-qual" ).slider( "value", form.tiprate.value );
        });
        form.tipperperson.value = "Tailored";
    }

    function calcAgain(event, ui){
        var form = document.forms[0];
        doCalcualtions(form,ui.value);
        updateTipTailoring(form.numguest.value);
    }
    
    function doCalcualtions(form,tipValue){
        
        var taxvalue = parseFloat(form.tax.value);
        var billDeductions = parseFloat(form.billdeductions.value);
        if(!form.checkboxtax.checked){
            taxvalue =  0;
        }
        if(!form.checkboxded.checked){
            billDeductions =  0;
        }
        console.log(event.target.id);
        var numOfGuests = parseInt(form.numguest.value,10);
        if(form.billtotal.value>0){
            var totaltipval = (parseFloat(form.billtotal.value) + taxvalue - billDeductions) * (parseFloat(tipValue)/100);
            form.totaltip.value  = totaltipval.toFixed(2);
            if(numOfGuests>0){
                var tipper = parseFloat(form.totaltip.value) / parseFloat(numOfGuests);
                form.tipperperson.value = tipper.toFixed(2);
            }
            
            var grandtotal = (parseFloat(form.billtotal.value) + parseFloat(form.tax.value) - parseFloat(form.billdeductions.value) + parseFloat(form.totaltip.value));
            form.total.value = grandtotal.toFixed(2);
        } 
    }
        
    function doValidations(){
        var form = document.forms[0];
        if(form.numguest.value <=0 || $.trim(form.numguest.value)==""){
            alert("Number of guest cannot be negative,zero or blank");
            form.numguest.value = 1;
        }
        if(form.numguest.value >99){
            alert("Enter number of guest between 1 - 99");
            form.numguest.value = 1;
        }
        if(form.billtotal.value <0.0|| $.trim(form.billtotal.value)=="" ){
            alert("Bill Amount cannot be negative or blank");
            form.billtotal.value=0;
        }
        if(parseFloat(form.billdeductions.value)<0.0|| $.trim(form.billdeductions.value)==""){
            alert("Bill Deductions cannot be negative or blank");
            form.billdeductions.value=0.0;
        }
        if(parseFloat(form.billdeductions.value) > parseFloat(form.billtotal.value)){
            alert("Bill Deductions are more than Bill Total");
            form.billdeductions.value = 0.0;
        }
        if(parseFloat(form.tax.value)> parseFloat(form.billtotal.value)){
            alert("Tax amount is bigger than Bill Amount");
        }
        if(parseFloat(form.tax.value) <0 || $.trim(form.tax.value)==""){
            alert("Tax cannot be negative or blank");
            form.tax.value=0;
        }
        if(parseFloat(form.mintip.value) <0|| $.trim(form.mintip.value)==""){
            alert("Minimum tip cannot be negative or blank");
            form.mintip.value=0;
        }
        if(parseFloat(form.maxtip.value) <0 || $.trim(form.maxtip.value)==""){
            alert("Maximum tip cannot be negative or blank");
            form.maxtip.value=40.0;
        }
       
        if(parseFloat(form.mintip.value) > parseFloat(form.maxtip.value) ){
            alert("Minimum tip cannot be more than Maximum tip");
            form.mintip.value=0.0;
            form.maxtip.value=40.0;
        } 
        if(parseFloat(form.maxtip.value) <parseFloat(form.mintip.value )){
            alert("Maximum tip cannot be less than Minimum tip");
            form.mintip.value=0.0;
            form.maxtip.value=40.0;
        }
    }
    
</script>

